<template>
	<div class="app-container">
		<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
			<el-form-item label="流程名称">
				<el-select clearable filterable style="width: 300px;" placeholder="所属流程"
					v-model="searchFrom.processDefinitionKey">
					<el-option v-for="item in modelList" :key="item.key" :label="item.name + '-' + item.key "
						:value="item.key" />
				</el-select>
			</el-form-item>
			<el-form-item label="标题">
				<el-input v-model="searchFrom.title" placeholder="标题" />
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" icon="el-icon-search" @click="getList">
					查询
				</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="listLoading" max-height="85vh" :data="list" border fit highlight-current-row
			style="width: 100%">
			<el-table-column width="260px" align="center" label="流程名称">
				<template slot-scope="{row}">
					<span
						:class="[row.processVariables.isBack ? 'rowBack' : '']">{{ row.processVariables.projectName }}</span>
				</template>
			</el-table-column>
			<el-table-column width="260px" align="center" label="任务名称">
				<template slot-scope="{row}">
					<span>{{ row.taskName }}</span>
				</template>
			</el-table-column>
			<el-table-column align="left" label="任务内容">
				<template slot-scope="{row}">
					<span>{{ row.processVariables.title }}</span>
				</template>
			</el-table-column>
			<el-table-column width="150px" align="left" label="流程状态">
				<template slot-scope="{row}">
					<span>{{ row.suspend ? $t('flowable.suspend') : $t('flowable.active') }}</span>
				</template>
			</el-table-column>
			<el-table-column width="250px" :label="$t('common.operation')">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit" type="text" size="mini" style="color: #1890ff;"
						@click="complete(scope.$index, scope.row)">
						{{$t('flowable.detail')}}
					</el-button>
					<el-button icon="el-icon-notebook-2" size="mini" type="text" style="color: #BB5500;"
						@click="showHistroy(scope.$index, scope.row)">
						{{$t('flowable.flowHistory')}}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="page.total" background
			@size-change="pageSizeChange" @current-change="currentPageChange" />
		<el-dialog :width="flowDialog.width" :heigth="flowDialog.heigth" :fullscreen="flowDialog.fullscreen"
			:visible.sync="common.completeFormVisible" center>
			<div  slot="title" class="dialog-title">
				<div class="dialog-header">
				{{$t('flowable.resolveTask')}}
				</div>
			</div>
			<component ref="auditComponent" :is="current" :msg="current"
				:processParam.sync="processParam"
				:nodeParam.sync="nodeParam"
				:taskInfo="taskInfo"
				:comment.sync="comment"
				:flowDialog.sync="flowDialog"></component>
			<div  v-if="common.showBtn" slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				
			</div>
		</el-dialog>

		<el-drawer :title="$t('flowable.flowHistory')" :visible.sync="history.drawer"
			style="height: 56.25rem;overflow: auto;" :direction="history.direction" :modal="history.modal"
			:with-header="false">
			<div style="padding: 1.25rem;">
				<div class="radio">
					<el-radio-group v-model="history.reverse">
						<el-radio :label="true">
							{{ $t('common.orderDesc') }}
						</el-radio>
						<el-radio :label="false">
							{{ $t('common.orderAsc') }}
						</el-radio>
					</el-radio-group>
				</div>
				<el-timeline style="margin-top: 1.25rem;height: 53.25rem;overflow: auto;" :reverse="history.reverse">
					<el-timeline-item style="cursor: pointer;" v-for="formItem in history.data" :key="formItem.taskId"
						:timestamp="formItem.endTime" :color="history.color" placement="top">
						<el-card @click.native="showHistroyDetail(formItem)">
							<h4>任务：{{ formItem.taskName }}</h4>
							<p>审批人：{{ formItem.assigner }}</p>
							<p>开始时间：{{ formItem.startTime }}</p>
							<p>结束时间：{{ formItem.endTime }}</p>
							<p>审批意见：{{ formItem.comment }}</p>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</div>
		</el-drawer>

		<el-dialog width="500px" :visible.sync="transferDialog.visiable" center>
			<div slot="title" class="dialog-title">
				<div class="dialog-header">
					{{ $t('flowable.taskTransfer') }}
				</div>
			</div>
			<el-form label-width="120px" width="500px" :inline="true">
				<el-form-item :label="$t('flowable.choiceUser')">
					<el-select filterable style="width: 300px;" v-model="transferForm.targetUser">
						<el-option v-for="item in userList" :key="item.userId"
							:label="item.userName+ '-' + item.userLoginName " :value="item.userLoginName" />
					</el-select>
				</el-form-item>
			</el-form>
			<div v-if="common.showBtn" slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="common.completeFormVisible = false">
						{{ $t('common.cancelBtn') }}
					</el-button>
					<el-button icon="el-icon-check" type="primary" @click="transferTask">{{ $t('common.submitBtn') }}
					</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import request from '@/utils/request'
	export default {
		name: 'Todo',
		data() {
			return {
				dialogWidth: "35%",
				current: "commonAudit",
				//历史信息
				history: {
					drawer: false,
					direction: "rtl",
					reverse: false,
					modal: false,
					data: [],
					color: "#0bbd87"
				},
				flowDialog: {
					width: "35%",
					heigth: "30%",
					fullscreen: false
				},
				//通用的一些信息
				common: {
					completeFormVisible: false,
					showBtn: true
				},
				// 流程变量
				processParam: {},
				// 当前节点变量
				nodeParam:{},
				// 当前任务信息
				taskInfo: {},
				// 审批意见
				comment: "",
				//查询条件
				searchFrom: {
					processName: "",
					title: ""
				},
				//是否异步加载
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				},
				dict: {
					user: {},
					role: {}
				},
				// 模型列表
				modelList: [],
				transferDialog: {
					visiable: false
				},
				transferForm: {
					taskId: "",
					targetUser: ""
				},
				// 用户列表
				userList: [],
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getUserList();
			this.getRoleList();
			this.queryModelList();
		},
		methods: {
			//查询列表
			getList() {
				var processParamStr = JSON.stringify({
					title: this.searchFrom.title
				});
				var querParams = {
					processParamStr: processParamStr,
					processDefinitionKey: this.searchFrom.processDefinitionKey,
					pageNo: this.page.currentPage,
					pageSize: this.page.pageSize
				}
				request({
					url: '/flowable/workflow/queryDone',
					method: 'post',
					data: querParams
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["processName"] = null;
				this.searchFrom["title"] = null;
			},
			//处理任务
			complete(index, row) {
				this.current = () => import('@/views/flowable/task/common/common-audit')
				if(row.taskFormKey){
					this.current = resolve => require.ensure([], () => resolve(require('@/views/flowable/task/custom/' + row.processDefinitionKey + '/' + row.taskFormKey + ".vue")));
				}
				this.taskInfo = row;
				this.nodeParam = row.variables;
				this.processParam = row.processVariables;
				this.common.completeFormVisible = true;
				this.common.showBtn = true;
			},
			showHistroyDetail(task) {
				this.current = () => import('@/views/flowable/task/common/common-audit')
				if (task.taskFormKey) {
					this.current = resolve => require.ensure([], () => resolve(require('@/views/flowable/task/custom/' +
						task.processDefinitionKey + '/' + task.taskFormKey + ".vue")));
				}
				this.taskInfo = task;
				this.auditInfo = task.variables;
				this.processParam = task.processVariables;
				this.common.completeFormVisible = true;
				this.common.showBtn = false;
			},

			//显示历史记录
			showHistroy(index, row) {
				var params = {
					taskId: row.taskId,
					processInstanceId: row.processInstanceId,
				}
				request({
					url: '/flowable/workflow/history',
					method: 'post',
					data: params
				}).then(response => {
					this.history.data = [];
					for (var i = 0; i < response.data.length; i++) {
						var curHistory = response.data[i];
						if (!curHistory.endTime) {
							curHistory.endTime = curHistory.startTime
						}
						if (!curHistory.assignee) {
							curHistory.assignee = curHistory.variables.userId
						}
						debugger
						var detail = {
							assigner: this.dict.user[curHistory.assignee],
							startTime: curHistory.startTime.substr(0, 19).replace("T", " "),
							endTime: curHistory.endTime.substr(0, 19).replace("T", " "),
							processInstanceId: curHistory.processInstanceId,
							taskId: curHistory.taskId,
							taskName: curHistory.taskName,
							taskFormKey: curHistory.taskFormKey,
							comment: curHistory.variables.comment,
							variables: curHistory.variables,
							processVariables: row.processVariables,
							processDefinitionKey: row.processDefinitionKey
						}
						this.history.data.push(detail)
					}
					this.history.drawer = true;
				})
			},
			//获取用户列表
			getUserList() {
				request({
					url: '/system/user/query',
					method: 'post',
				}).then(response => {
					this.userList = response.data;
					for (var i = 0; i < response.data.length; i++) {
						this.dict.user[response.data[i]["userId"]] = response.data[i]["userName"]
					}
				})
			},
			// 任务转办弹窗显示
			transfer(row) {
				this.transferForm = {
					taskId: row.taskId,
					tagetUser: ""
				};
				this.transferDialog.visiable = true
			},
			// 任务转办
			transferTask() {
				let _this = this;
				request({
					url: '/flowable/workflow/transferTask',
					method: 'post',
					data: this.transferForm
				}).then(response => {
					_this.getList();
					_this.$message({
						message: response.message,
						type: 'success'
					});
					_this.transferDialog.visiable = false
				})
			},
			//获取角色信息
			getRoleList() {
				request({
					url: '/system/role/query',
					method: 'post',
				}).then(response => {
					for (var i = 0; i < response.data.length; i++) {
						this.dict.role[response.data[i]["roleId"]] = response.data[i]["roleName"]
					}
				})
			},
			// 查询模型列表
			queryModelList() {
				let _this = this;
				request({
					url: '/flowable/workflow/queryModelList',
					method: 'post',
					data: {

					}
				}).then(response => {
					debugger
					_this.modelList = response.data;
				})
			},
		}
	}
</script>

<style>
	.rowBack {
		color: red;
	}
</style>
